<template>
    <div class="article-list" @scroll="debounceMethods(rememberScroll,800)" ref="ArticleList">
         <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
                <article-item :article="article" v-for="article in articleList" :key="article.art_id" />
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import articleItem from './article-item.vue'
import { getArticles } from '@/api/channel.js'
import debounce from '@/mixins/debonce.js'

export default {
  props: ['channelId'],
  // 用混入导入防抖函数
  mixins: [debounce],
  created () {
    // getArticles(this.channelId, +new Date()).then((data) => {
    //   console.log(data.results)
    //   this.articleList = data.results
    // })
  },
  data () {
    return {
      articleList: [],
      timestamp: '',
      refreshing: false,
      loading: false,
      finished: false,
      scrollTop: 0
    }
  },
  components: {
    articleItem
  },
  activated () {
    // 当组件激活时设置位置为保存的位置
    this.$refs.ArticleList.scrollTop = this.scrollTop
  },
  methods: {
    // 记录滚动条
    rememberScroll () {
      // 获取scroll的位置 获取的应该是DOM元素article-list的位置
      // 在原始标签上添加ref  通过this.$refs.设置的name获取的是DOM元素
      //  如果ref放到了原始标签上， 可以通过this.$refs.ArticleList 获取DOM元素
      //  如果ref放到了自定义的组件上，可以通过this.$refs.** 获取组件的实例对象
      //   this.$refs.**.$el
      // 调用过于频繁 需要用防抖节流来优化 防抖:在一段时间内只保留最后一次操作 适用于搜索等功能  节流:在一段时间内只执行第一次
      console.log(this.$refs.ArticleList.scrollTop)
      // 保存
      this.scrollTop = this.$refs.ArticleList.scrollTop
    },
    onRefresh () {
      console.log('下拉刷新')
      getArticles(this.channelId, this.timestamp ? this.timestamp : +new Date()).then((data) => {
        console.log(data.results)
        // 刷新时
        this.articleList = [...data.results]
        // 保存上一次的时间戳
        this.timestamp = data.pre_timestamp
        // 让刷新消失
        this.refreshing = false
      })
    },
    onLoad () {
      console.log('上拉加载')
      // 获取文章列表
      getArticles(this.channelId, this.timestamp ? this.timestamp : +new Date()).then((data) => {
        console.log(data.results)
        if (data.results.length) {
          // 让 加载更多 消失 加载只出现一次
          this.loading = false
        }
        // 刷新时 将当前请求的数据合并到articleList里面
        this.articleList = [...this.articleList, ...data.results]
        // 保存上一次的时间戳
        this.timestamp = data.pre_timestamp
      })
    }
  }
}
</script>
<style scoped lang="less">
.article-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 32px;
}
</style>
